import React, { Component } from 'react'
import { get } from '../../Lib/Http';
import apiUrl from '../../Config/web';
import { Spin } from 'antd';
import Head from '../question/Head';
import { Modal } from 'antd-mobile';
import './analysis.css';


class Analysis extends Component {

    constructor(props){
        super(props);

        this.state={
            data:null,
        }

    }

    componentDidMount(){
        let that = this;

        let _b_url = that.props.history.location.pathname;
        window._hmt.push(['_trackPageview', _b_url]);

        let parmasData = this.props.match;

        get(apiUrl.eaxm, parmasData.params, function(success){

            //成功请求
            if(success.data.code === 0){
                that.setState({
                    data:success.data.data,
                });
                return;
            }

            //不成功
            if(success.data.code === 1001){
                const alert = Modal.alert;
                alert('提示', '请先购买试卷', [
                    { text: '确认', onPress: () => that.props.history.goBack() },
                ]);
                return;
            }

        }, function(error){

            console.log(error);

        });

    }

    countHeight(){
        let height = window.innerHeight;
        let result = 100-(44/height*100);
        return result+'%';
    }

    getTitle(type){

        if(type === 1){
            return {
                title:'听力原文',
                emphasis:'未听先知',
                detail:'详解详细',
            };
        }

        if(type === 2){
            return {
                title:'原文翻译',
                emphasis:'选项归类',
                detail:'详解详细',
            }
        }

        if(type === 3){
            return {
                title:'原文翻译',
                emphasis:'',
                detail:'详解详细',
            }
        }

        if(type === 4){
            return {
                title:'原文翻译',
                emphasis:'高频词汇及短语',
                detail:'详解详细',
            }
        }

        if(type === 5){
            return {
                title:'参考译文',
                emphasis:'难点注释',
                detail:'',
            }
        }

        if(type === 6){
            return {
                title:'范文点评',
                emphasis:'扩展空间',
                detail:'',
            }
        }


        return {
            title:'',
            emphasis:'',
            detail:'详解详细',
        }
    }

    getEmphasis(type, title, data){

        if(type === 3){
            return (
                <div></div>
            );
        }

        return (
            <div className="analysis-card-wrapper">
                <div className="analysis-card">
                    <div className="analysis-card-title">
                        {title}
                    </div>
                    <div className="analysis-card-content" dangerouslySetInnerHTML={{__html:data}}></div>
                </div>    
            </div>
        );

    }

    getAudio(type, data){

        console.log(type);

        if(type === 1){
            return (
                <div className="analysis-card-wrapper">
                    <div className="analysis-card">
                        <div className="analysis-card-title">
                            听力音频
                        </div>
                        <div className="analysis-card-content">
                            <audio controls="controls" style={{width:'100%'}} controlslist="nodownload" >
                                <source src={data.common_question} />
                            </audio>
                        </div>
                    </div>    
                </div>
            );
        }

        return (
            <div></div>
        );
    }

    getSelectStr(data, cardTitle, type){
        
        if(type === 5 || type === 6){
            return (<div></div>);
        }

        let str = '';
        for(let x in data){

            if(data[x]['disabuse'] === 'null'){
                break;
            }

            str+= data[x]['disabuse']+'<hr/>'
        }

        str = str.replace(/<hr\/>$/, '')

        // return str;

        return (
            <div className="analysis-card-wrapper">
                    <div className="analysis-card">
                        <div className="analysis-card-title">
                            {cardTitle.detail}
                        </div>
                        <div className="analysis-card-content" dangerouslySetInnerHTML={{__html:str}}></div>
                    </div>    
            </div>
        )


    }

    getWriting(data, type){
        
        let returnData = {
            thinking:'',
            trans:''
        }

        if(type !== 6){
            returnData.thinking = (<div></div>);
            returnData.trans = (<div></div>);
            return returnData;
        }

        data = JSON.parse(data);

        returnData.thinking = (
            <div className="analysis-card-wrapper">
                <div className="analysis-card">
                    <div className="analysis-card-title">
                        审题思路
                    </div>
                    <div className="analysis-card-content" dangerouslySetInnerHTML={{__html:data['thinking']}}></div>
                </div>    
            </div>
        );

        returnData.trans = (
            <div className="analysis-card-wrapper">
                <div className="analysis-card">
                    <div className="analysis-card-title">
                        写作题纲
                    </div>
                    <div className="analysis-card-content" dangerouslySetInnerHTML={{__html:data['trans']}}></div>
                </div>    
            </div>
        );

        return returnData;
    }

    render() {

        if(this.state.data === null){
            return (<Spin tip="Loading..." className="home-loding" size="large" />);
        }

        let data = this.state.data;
        let cardTitle = this.getTitle(data.type);

        let empahsis = this.getEmphasis(data.type, cardTitle.emphasis, data.emphasis);
        let selection = data.bind_question;
        let str = this.getSelectStr(selection, cardTitle, data.type);

        let audio = this.getAudio(data.type, data);
        let writing = this.getWriting(data['common_question'], data.type);

        console.log(writing);

        return (
            <div  className="root">
                <Head history={this.props.history} title='答案解析' />

                <div  style={{height:this.countHeight(), backgroundColor:'#eee'}} className="question2-view">

                    {audio}

                    {writing.thinking}

                    {writing.trans}

                    <div className="analysis-card-wrapper">
                        <div className="analysis-card">
                            <div className="analysis-card-title">
                                {cardTitle.title}
                            </div>
                            <div className="analysis-card-content" dangerouslySetInnerHTML={{__html:data.translation}}></div>
                        </div>    
                    </div>

                    {empahsis}

                    {str}

                </div>

            </div>
        );
    }
}

export default Analysis;